<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>自适应显示多个点标记</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .amap-icon img{
            width: 25px;
            height: 34px;
        }
    </style>
        <th:block th:include="include :: header('新增巡检点')" />
</head>
<body>
<div id="container"></div>
<input type="hidden" id="along">
<input type="hidden" id="latitude">
<div class="input-card">
    <h4>地图自适应</h4>
    <input id="setFitView" type="button" class="btn" value="地图自适应显示" />
</div>
<div class="info">
    <div id="centerCoord"></div>
    <div id="tips"></div>
</div>
<script  th:src="@{/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=948066487cbe8e187b2560b8d9e5940b"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">

    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });

    map.clearMap();  // 清除地图覆盖物
    $.ajax({url:"/inspection/dian/allDian",type:"post",async:true,success:function (reslut) {
            if (reslut.code ==200) {
                reslut.list.forEach(function(dian) {
                    var ds=new AMap.Marker({
                        map: map,
                        icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                        position: [dian.along, dian.latitude],
                        offset: new AMap.Pixel(-13, -30)
                    });
                });
                map.setFitView();
            }else{
                layer.msg(reslut.mag, {icon: 2});
            }
        },error:function () {
            layer.msg("操作失败", {icon: 2});
        }
    });

    var along=[[${yi}]];
    var latitude=[[${er}]];
    var along2;
    var latitude2;
    if (along!="1" && latitude!="1"){
        along2=along;
        latitude2=latitude;
    }else{
        along2=116.397428;
            latitude2=39.90923;
    }

    var maaddd = new AMap.Marker({
        map: map,
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
        position: [ along2, latitude2],
        offset: new AMap.Pixel(-13, -30),
        draggable: true,
        cursor: 'move',
        // 设置拖拽效果
        raiseOnDrag: true
    }).on("dragend", daa);
    map.setFitView();

    function daa() {
       $("#along").val(maaddd.getPosition().R);
        $("#latitude").val(maaddd.getPosition().Q);

    }

    var center = map.getCenter();

    var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
    document.getElementById('centerCoord').innerHTML = centerText;
    document.getElementById('tips').innerHTML = '';

    // 添加事件监听, 使地图自适应显示到合适的范围
    AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() {
        var newCenter = map.setFitView();
        document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
        document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
    });

</script>
</body>
</html>